<template>
  <el-table @row-dblclick="doSome" :data="list" style="width: 100%;padding-top: 15px;">
    <!-- <el-table-column label="举报者" width="70">
      <template slot-scope="scope">
        {{ scope.row.reporter | orderNoFilter }}
      </template>
    </el-table-column> -->
    <el-table-column label="举报描述详情" min-width="100" align="center">
      <template slot-scope="scope">
        {{ scope.row.reportdetail }}
      </template>
    </el-table-column>
    <el-table-column label="被举报者" width="70" align="center">
      <template slot-scope="scope">
        {{ scope.row.reported }}
      </template>
    </el-table-column>
    <el-table-column label="被举报者评论" width="195" align="center">
      <template slot-scope="scope">
        {{ scope.row.message }}
      </template>
    </el-table-column>
    <el-table-column label="举报类型" width="80" align="center">
      <template slot-scope="{row}">
        <el-tag :type="row.status | statusFilter">
          {{ row.tag }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column width="195" align="right" label="操作">
      <template slot-scope="scope">
        <el-button size="mini" @click="handleCancel(scope.$index, scope.row)">撤销</el-button>
        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { transactionList } from '@/api/remote-search'
import {
  getReportInfo, cancelReport
  , deleteReport
} from "@/api/article"

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        success: 'success',
        pending: 'danger'
      }
      return statusMap[status]
    },
    orderNoFilter(str) {
      return str.substring(0, 30)
    }
  },
  data() {
    return {
      list: null
    }
  },
  created() {
    this.fetchData()
    this.getReport();
  },
  methods: {
    fetchData() {
      transactionList().then(response => {
        // this.list = response.data.items.slice(0, 8)
      })
    },
    async getReport() {
      let res = await getReportInfo();
      // console.log(res);
      this.list = res.reportDetails;
    },
    doSome(row) {
      //进行评论的操作
      //双击row进行操作
      //可以展示详情
      this.getReport()//在获取一下请求！！
    },
   async handleCancel(index, row) {
      console.log(index, row);
      //这个是进行撤销操作！！！
    let res=await cancelReport(row.id);
    // console.log(res);
    if(res.code==200){
      this.$message({
        type:'success',
        message:res.msg
      })
    }else{
      this.$message({
        type:'error',
        message:res.msg
      })
    }
    },
    async handleDelete(index, row) {
      console.log(index, row);
      //这个是进行删除评论操作
      let res=await deleteReport(row.id,row.commentid);
      // console.log(res);
      if(res.code==200){
      this.$message({
        type:'success',
        message:res.msg
      })
    }else{
      this.$message({
        type:'error',
        message:res.msg
      })
    }
    }
  }
}
</script>
